<template>
  <el-popover
    placement="bottom"
    width="200"
    v-model="isShow"
    trigger="click"
  >
  <div class="scroll-tree">
    <m7-tree :data="sendTree"
             ref="m7Tree"
             :filter-node-method="filterNode"
             @node-click="nodeClick" node-key="id"></m7-tree>
  </div>
    <el-input slot="reference" v-model="input" style="width: 194px" :placeholder="value"></el-input>
  </el-popover>
</template>

<script>
  import m7Tree from '../../ui-modules/tree/src/tree'
  export default {
    name: 'sendAget',
    data () {
      return {
        value: '',
        input: '',
        sendData: {},
        isShow: false
      }
    },
    props: {
      sendTree: {type: Array, default: function () { return [] }}
    },
    components: {
      m7Tree
    },
    methods: {
      nodeClick (data, node) {
        if (data.type) {
          this.sendData = {[data.type]: data.id}
          this.value = data.label
          this.isShow = false
          this.input = ''
        } else if (data.id === 'all') {
          this.value = data.label
          this.sendData = {}
          this.input = ''
          this.isShow = false
        }
      },
      filterNode (val, data) {
        return data.label.indexOf(val) !== -1
      },
      reset () {
        this.sendData = {}
        this.value = this.$t('public.all')
      }
    },
    watch: {
      isShow (cur) {
        if (cur) {
          this.$refs.m7Tree.reset()
        }
      },
      input (cur) {
        this.$refs.m7Tree.filter(cur)
      }
    }
  }
</script>

<style scoped lang='stylus'>
</style>
